<template>
    <a-card>
      <a-form
        layout="inline"
        :model="formState">
        <a-form-item label="姓名：">
            <a-input v-model:value="formState.userName" placeholder="请输入名称"></a-input>
        </a-form-item>
        <a-form-item label="卡号：">
            <a-input v-model:value="formState.cardId" placeholder="卡号"></a-input>
        </a-form-item>
        <a-form-item label="积分">
            <a-input v-model:value="formState.integration" placeholder="请输入积分"></a-input>
        </a-form-item>
        <a-form-item>
            <a-button type="primary">查询</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card style="margin-top: 10px;">
        <a-table :data-source="dataSource" :columns="columns">
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'integration'">
                    <span :style="{ color: record.integration > 400 ? 'red' : 'black' }">{{ record.integration }} / 500</span>
                </template>
                <template v-if="column.key === 'level'">
                    <span>{{ levelFun(record.integration) }}</span>
                    <a-progress :percent="levelProgress(record.integration)" size="small" />
                </template>
            </template>
        </a-table>
    </a-card>
</template>

<script>
import { getPeopleVipList } from '@/api/people/viper.js'
import { defineComponent } from '@vue/composition-api'
import { reactive } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
const columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
}, {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex'
}, {
    title: '联系电话',
    dataIndex: 'phone',
    key: 'phone'
}, {
    title: '卡号',
    dataIndex: 'cardId',
    key: 'cardId'
}, {
    title: '积分',
    dataIndex: 'integration',
    key: 'integration'
}, {
    title: '等级',
    dataIndex: 'level',
    key: 'level'
}, {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
}]
export default defineComponent({
    setup() {
        onMounted(() => {
            init()
        })
        const dataSource = reactive([])
        const formState = reactive({
            userName: '',
            cardId: ''
        })

        // 列表
        const init = () => {
            getPeopleVipList().then(res => {
                res.data.result.forEach(item => {
                    dataSource.push(item)
                })
            })
        }
        // 等级
        const levelFun = integration => {
            let level = Math.floor(integration / 50)
            return level + '级会员'
        }
        const levelProgress = integration => {
            let progress = integration % 50
            return progress
        }
        return {
            formState,
            columns,
            dataSource,
            levelFun,
            levelProgress
        }
    },
})
</script>

